<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change" :isEdit="isEdit"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="layout-all">
      <el-form-item label="商品类名:" prop="title">
        <el-input v-model="form.title" placeholder="请输入商品类名" class="form-width"/>
      </el-form-item>
      <el-form-item label="上级:" prop="pid" v-if="cate_type>1">

          <el-cascader-panel
          clearable
          v-model="value"
          :options="parent"
          :props="expand"
          class="form-width-50"
          placeholder="请选择上级分类"
          @change="handleChange"></el-cascader-panel>

      </el-form-item>
      <el-form-item label="封面:">
        <upload-pic v-show="this.value.length==0||form.pid==0" :thumb="form.thumb" @update:thumb="form.thumb=$event" width="250" height="100"/>
        <upload-pic v-show="this.value.length>0&&form.pid>0" :thumb="form.thumb" @update:thumb="form.thumb=$event" width="100" height="100"/>
        <span>一级分类：750 x 300, 二三级分类100 x 100</span>
        <!-- <el-input v-model="form.thumb" placeholder="请输入封面" /> -->
      </el-form-item>
       <el-form-item label="计算业绩时的百分比:" prop="achievement">
        <el-input v-model="form.achievement" placeholder="请输入百分比" class="form-width-10"/>
      </el-form-item>

      <template v-if="this.value.length==0||form.pid==0">
      <template v-if="pro_type==5">
        <el-form-item label="药品标签(用于处方问答)" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入药品标签(用','分隔)" class="form-width"/>
        </el-form-item>
      </template>
      <el-form-item label="单独级差奖:" prop="is_level_diff">
        <el-switch v-model="form.is_level_diff" />
        <el-radio-group v-model="level_diff.commission_type" v-if="form.is_level_diff" style="margin: 0 10px">
          <el-radio-button  :label="0">按比例</el-radio-button>
          <el-radio-button :label="1">按金额</el-radio-button>
        </el-radio-group>
          <el-radio-group v-model="level_diff.type" v-if="form.is_level_diff" @change="change_comm_type" >
            <el-tooltip class="item" effect="dark" content="直推间推,以此类推" placement="top-start">
            <el-radio-button  :label="0">按推荐关系</el-radio-button>
             </el-tooltip>
             <el-tooltip class="item" effect="dark" content="判断上级等级分别分佣" placement="top-start">
            <el-radio-button :label="1">按级差</el-radio-button>
             </el-tooltip>
          </el-radio-group>

      </el-form-item>
      <el-form-item v-if="form.is_level_diff" >
        <template v-if="level_diff.type==0">
          <el-form-item label-width="200px" :label="(index+1)+'级分佣比(%):'"  v-for="(val,index) in level_diff.proportion" :key="index" v-if="level_diff.commission_type==0">
            <el-input v-model="level_diff.proportion[index]" class="form-width-10" placeholder="请输入分佣比(%)" />
          </el-form-item>
          <el-form-item label-width="200px" :label="(index+1)+'级分佣金额(元):'"  v-for="(val,index) in level_diff.fixed" :key="index" v-if="level_diff.commission_type==1">
            <el-input v-model="level_diff.fixed[index]" class="form-width-10" placeholder="请输入分佣(元)" />
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label-width="200px" :label="level_info[index].id+'级('+level_info[index].title+')比(%):'" v-for="(val,index) in level_diff.proportion" :key="index" v-if="level_diff.commission_type==0">
          <el-input v-model="level_diff.proportion[index]" class="form-width-10" placeholder="请输入折扣比(%)" />
        </el-form-item>
        <el-form-item label-width="200px" :label="level_info[index].id+'级('+level_info[index].title+')金额(元):'"  v-for="(val,index) in level_diff.fixed" :key="index" v-if="level_diff.commission_type==1">
          <el-input v-model="level_diff.fixed[index]" class="form-width-10" placeholder="请输入折扣(元)" />
        </el-form-item>
        </template>
        
      </el-form-item>

      <el-form-item label="单独同级奖:" prop="is_level_identical">
        <el-switch v-model="form.is_level_identical" />
        <el-radio-group v-model="level_identical.commission_type" v-if="form.is_level_identical">
          <el-radio-button  :label="0">按比例</el-radio-button>
          <el-radio-button :label="1">按金额</el-radio-button>
        </el-radio-group>

      </el-form-item>
      <el-form-item v-if="form.is_level_identical" >

        <el-form-item label-width="200px" :label="level_info[index].id+'级('+level_info[index].title+')比(%):'" v-for="(val,index) in level_identical.proportion" :key="index" v-if="level_identical.commission_type==0">
          <el-input v-model="level_identical.proportion[index]" class="form-width-10" placeholder="请输入折扣比(%)" />
        </el-form-item>
        <el-form-item label-width="200px" :label="level_info[index].id+'级('+level_info[index].title+')金额(元):'"  v-for="(val,index) in level_identical.fixed" :key="index" v-if="level_identical.commission_type==1">
          <el-input v-model="level_identical.fixed[index]" class="form-width-10" placeholder="请输入折扣(元)" />
        </el-form-item>
      </el-form-item>
      </template>
      <el-form-item label="排序:" prop="sort">
        <el-input-number v-model="form.sort" label="排序" class="form-width-10"/>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name:"ClassForm",
  props:{
    isEdit:{
      type:Boolean,
      default:false,
    }
  },
  data() {
    return {
      id: 0,
      cate_type: 1,
      pro_type: 1,
      RETAIL_LEVEL: 0,
      is_change: undefined,
      value: [],
      parent: [],
      expand:{
        value: 'id',
        label: 'title',
        children: 'child',
        expandTrigger: 'hover',
        checkStrictly: true,
      },
      form: {
        id: 0,
        pid: '',
        achievement: 100,
        title: '',
        sort: 0,
        thumb: '',
        is_level_diff: false,
        is_level_identical: false,
      },
      rules: {
        title: [{
          required: true,
          message: '请输入商品类名',
          trigger: 'blur'
        }]
      },
      level_diff: {
        commission_type:0,
        	fixed:[],
        	proportion:[],
      },
      level_identical: {
        commission_type:0,
        	fixed:[],
        	proportion:[],
      },
    }
  },
  mounted() {
    if(this.isEdit){
      this.id =this.$store.state.user.editId
    }else{
      this.id = (this.$route.params && this.$route.params.id)||0
      this.$setTagsViewTitle(this.id)
    }

    this.init_into()
  },
  methods: {
    //修改单独分佣推荐或级差
    change_comm_type (item) {
      this.level_diff=this.setCommArray(this.level_diff,item==0?this.RETAIL_LEVEL:this.level_info.length)
      this.form.is_level_identical=item==1
    },
    handleChange(){
      if(this.value[0]==0){
        this.form.pid=0
        return
      }
      this.form.pid=this.value[this.value.length-1]
    },
    onSubmit(formName) {
      // if(this.value.length==0){
      //   this.$msg_ok('error', '请选择上级分类')
      //   return
      // }
      const form = this.form
      this.$refs[formName].validate(valid => {
        if (valid) {
          form.id = this.id
          this.form.is_level_diff =this.form.is_level_diff?1:0
          this.form.is_level_identical =this.form.is_level_identical?1:0
          this.form.level_diff =this.level_diff
          this.form.level_identical =this.level_identical

          this.get('/admin/GoodsCate/save', form, 'POST').then(e => {
            if(this.isEdit){
              this.$store.commit('user/SET_EDIT','')
            }else{
              this.$back()
            }
            
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      console.log('submit!')
    },

    init_into() {
      this.loading = true
      this.get('/admin/GoodsCate/info?id=' + this.id, 'POST').then(e => {
         this.parent = e.parent
        this.cate_type = e.cate_type
        this.pro_type = e.pro_type
        if(this.id){
          this.form = e.info
          this.form.is_level_diff =this.form.is_level_diff== 1
          this.form.is_level_identical =this.form.is_level_identical== 1
        }
       
        this.parent.unshift({
          id:0,
          title:'一级分类',
          child:[]
        })

        for(let i in this.parent){
          if(this.id){
            this.parent[i].disabled=true
          }
          for(let j in this.parent[i].child){
            if(this.cate_type==2||this.id){
              this.parent[i].child[j].disabled=true
            }
            if(this.cate_type>2||this.id){
              for(let k in this.parent[i].child[j].child){
                  this.parent[i].child[j].child[k].disabled=true
              }
            }
          }
        }
        this.level_info=e.level_info
        this.RETAIL_LEVEL = e.RETAIL_LEVEL
        //级差
        if(e.level_diff!=null){
          this.level_diff=e.level_diff
        }

        this.level_diff=this.setCommArray(this.level_diff,this.level_diff.type==0?this.RETAIL_LEVEL:this.level_info.length)


         //同级
        if(e.level_identical!=null){
          this.level_identical=e.level_identical
        }

        this.level_identical=this.setCommArray(this.level_identical,this.level_info.length)

        setTimeout(()=>{this.is_change=false},100)
      })
    },
    //转换数组长度
    setCommArray(arr,length){
      let count=length-arr.fixed.length
      if(count<0){
        arr.fixed=arr.fixed.slice(0,length)
      }else if(count>0){
        for(let i=0 ;i<count;i++){
          arr.fixed.push(0)
        }
      }
      count=length-arr.proportion.length
      if(count<0){
        arr.proportion=arr.proportion.slice(0,length)
      }else if(count>0){
        for(let i=0 ;i<count;i++){
          arr.proportion.push(0)
        }
      }
      return arr
    },
    cg_select(event) {
      this.form.sort = event
    },
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    },
    level_diff:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    },
    level_identical:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    },
  }
}
</script>

<style>
.layout-all {
  margin: 10px;
}
</style>
